<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="YCR">
    
    <title>
        
            微信小程序开发笔记 |
        
        Ycr&#39;s Blog
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/logo.jpg">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.2/source/css/font-awesome.min.css">
    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"ycr10.xyz","root":"/","language":"zh-CN","path":"search.xml"};
    KEEP.theme_config = {"toc":{"enable":true,"number":true,"expand_all":true,"init_open":true},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.jpg","favicon":"/images/logo.jpg","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":true,"scale":true},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"“喜欢你的人一直有空，什么都懂，无所不能。”"},"scroll":{"progress_bar":{"enable":false},"percent":{"enable":false}}},"local_search":{"enable":true,"trigger":"auto","unescape":false,"preload":true},"code_copy":{"enable":true,"style":"default"},"pjax":{"enable":true},"lazyload":{"enable":false},"version":"3.4.2"};
    KEEP.language_ago = {"second":"%s 秒前","minute":"%s 分钟前","hour":"%s 小时前","day":"%s 天前","week":"%s 周前","month":"%s 月前","year":"%s 年前"};
  </script>
<meta name="generator" content="Hexo 5.3.0"><link rel="alternate" href="/atom.xml" title="Ycr's Blog" type="application/atom+xml">
</head>


<body>
<div class="progress-bar-container">
    

    
        <span class="pjax-progress-bar"></span>
        <span class="pjax-progress-icon">
            <i class="fas fa-circle-notch fa-spin"></i>
        </span>
    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            <a class="logo-title" href="/">
                Ycr&#39;s Blog
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                首页
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               target="_blank" rel="noopener" href="https://space.bilibili.com/474149759"
                            >
                                BILIBILI
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                归档
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                分类
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/tags"
                            >
                                标签
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/about"
                            >
                                关于
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/Links"
                            >
                                友链
                            </a>
                        </li>
                    
                    
                        <li class="menu-item search search-popup-trigger">
                            <i class="fas fa-search"></i>
                        </li>
                    
                </ul>
            </div>
            <div class="mobile">
                
                    <div class="icon-item search search-popup-trigger"><i class="fas fa-search"></i></div>
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">首页</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       target="_blank" rel="noopener" href="https://space.bilibili.com/474149759">BILIBILI</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">归档</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">分类</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/tags">标签</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/about">关于</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/Links">友链</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">微信小程序开发笔记</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="/images/avatar.jpg">
                </div>
                <div class="info">
                    <div class="author">
                        <span class="name">YCR</span>
                        
                            <span class="author-label">Lv1</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;2021-03-14 18:18:57
    </span>
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/">微信小程序</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/">微信小程序</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/%E5%BC%80%E5%8F%91%E7%AC%94%E8%AE%B0/">开发笔记</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/MQTT/">MQTT</a>&nbsp;
                    </li>
                
                    <li>
                        | <a href="/tags/JavaScript/">JavaScript</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
    
    
        <span class="article-pv article-meta-item">
            <i class="fas fa-eye"></i>&nbsp;<span id="busuanzi_value_page_pv"></span>
        </span>
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <h1 id="微信小程序开发笔记"><a href="#微信小程序开发笔记" class="headerlink" title="微信小程序开发笔记"></a>微信小程序开发笔记</h1><p>我最近正在研究一个有关于手机监控的系统，就想到了用微信小程序来作为手机端与其他的硬件进行通信。</p>
<h2 id="准备工作"><a href="#准备工作" class="headerlink" title="准备工作"></a>准备工作</h2><ol>
<li>微信开发者工具</li>
<li>Visual Studio Code  <del>(我觉得微信开发者工具太丑了，还是用vscode吧)</del></li>
</ol>
<h2 id="Visual-Studio-Code-插件准备"><a href="#Visual-Studio-Code-插件准备" class="headerlink" title="Visual Studio Code 插件准备"></a>Visual Studio Code 插件准备</h2><ol>
<li><p>小程序助手</p>
<p>让vscode 提供对 .wxss .wxml 文件后缀的支持</p>
</li>
</ol>
<p><img src="https://s3.ax1x.com/2021/03/14/606LUe.png" alt="1.png"></p>
<ol start="2">
<li><p>wxml</p>
<p>高亮显示</p>
</li>
</ol>
<p><img src="https://s3.ax1x.com/2021/03/14/606Tu6.png" alt="2.png"></p>
<ol start="3">
<li><p>vscode weapp api</p>
<p>小程序代码片段</p>
</li>
</ol>
<p><img src="https://s3.ax1x.com/2021/03/14/606Ijx.png" alt="3.png"></p>
<p>这样多好看~</p>
<p>放张图对比下</p>
<ol>
<li>微信开发者工具</li>
</ol>
<p><img src="https://s3.ax1x.com/2021/03/14/60gQyt.png" alt="5.png"></p>
<ol>
<li>Visual Studio Code</li>
</ol>
<p><img src="https://s3.ax1x.com/2021/03/14/60glOP.png" alt="4.png"></p>
<p>飞起来~</p>
<p><del>(虽然调试还是得用微信开发者工具)</del></p>
<p><del>屑腾讯</del></p>
<h2 id="使用Mqtt协议连接阿里云物联网平台"><a href="#使用Mqtt协议连接阿里云物联网平台" class="headerlink" title="使用Mqtt协议连接阿里云物联网平台"></a>使用Mqtt协议连接阿里云物联网平台</h2><p>要在微信小程序中使用 <code>websocket</code> 就必须遵守 <del>腾讯</del> 的规则。</p>
<blockquote>
<p>1.不能使用特殊的端口，仅可使用 <code>443</code> 端口，即 <code>https</code> 端口进行通信。<br>2.连接的host地址前要加 <code>wss://</code> 且不能在后面加端口号。（如 <code>mqtt.ycr10.xyz</code> 写成 <code>wss://mqtt.ycr10.xyz</code> ，而不能写成 <code> wss://mqtt.ycr10.xyz:443</code> ）</p>
</blockquote>
<h2 id="讲几个mqtt常用的函数"><a href="#讲几个mqtt常用的函数" class="headerlink" title="讲几个mqtt常用的函数"></a>讲几个mqtt常用的函数</h2><p>了解了 <code>host</code>规则后，就要开始正式连接了。</p>
<p>这里我使用的是广为人知的 <a target="_blank" rel="noopener" href="https://github.com/mqttjs/MQTT.js/"><code>MQTT.js</code></a> 库，这是出了名的好用。</p>
<p>这里简单讲几个常用的操作，如有错误欢迎评论区提出。<del>（我只是一个初二的蒟蒻）</del></p>
<h3 id="mqtt-connect"><a href="#mqtt-connect" class="headerlink" title="mqtt.connect()"></a>mqtt.connect()</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">mqtt.connect(host,options)</span><br></pre></td></tr></table></figure>
<p>这是一个连接函数，<code>host</code> 是连接服务器的网址， <code>options</code> 存放一些参数的。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> options = &#123;</span><br><span class="line">      connectTimeout: <span class="number">4000</span>,</span><br><span class="line">      clientId: <span class="string">&#x27;****|securemode=*,signmethod=****|&#x27;</span>, <span class="comment">// 这是你的阿里云物联网平台的Mqtt-ClientID</span></span><br><span class="line">      port: <span class="number">443</span>, <span class="comment">// 端口号，似乎只能443</span></span><br><span class="line">      username: <span class="string">&#x27;****&#x27;</span>, <span class="comment">// 这是你的阿里云物联网平台的用户名</span></span><br><span class="line">      password: <span class="string">&#x27;****&#x27;</span>, <span class="comment">// 这是你的阿里云物联网平台的密码</span></span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
<p>这些详细的配置可以看<a class="link"   target="_blank" rel="noopener" href="https://help.aliyun.com/document_detail/86706.html?accounttraceid=939d8fae0d484be685d1f2a99cab9d70mmww" >阿里云的官方文档<i class="fas fa-external-link-alt"></i></a></p>
<h3 id="client-subscribe"><a href="#client-subscribe" class="headerlink" title="client.subscribe()"></a>client.subscribe()</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">client.subscribe(topic，&#123;</span><br><span class="line">   qos: <span class="number">0</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>这是一个订阅主题的函数， <code>topic</code> 是你要订阅的函数，后面还可以放一些拓展参数。</p>
<p>注： <code>qos</code> 是MQTT设计的一套保证消息稳定传输的机制。</p>
<p>例子：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">client.subscribe(<span class="string">&#x27;/miniprogram/user/Text&#x27;</span>, &#123;</span><br><span class="line">        qos: <span class="number">0</span></span><br><span class="line">      &#125;, <span class="function"><span class="keyword">function</span> (<span class="params">err</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (!err) &#123;</span><br><span class="line">          <span class="built_in">console</span>.log(<span class="string">&quot;订阅成功&quot;</span>)</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;)</span><br></pre></td></tr></table></figure>
<h3 id="client-publish"><a href="#client-publish" class="headerlink" title="client.publish()"></a>client.publish()</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">client.publish(topic,message)</span><br></pre></td></tr></table></figure>
<p>这是一个发布的函数。<code>topic</code> 指的是你想要发布到的主题， <code>message</code> 指的是你想要发布的内容。</p>
<p>例子：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">client.publish(<span class="string">&#x27;/miniprogram/user/Text&#x27;</span>,<span class="string">&#x27;Hello World !&#x27;</span>)</span><br></pre></td></tr></table></figure>
<p><del>我是觉得使用率比较高的就是这几个了，学生党蒟蒻，大佬欢迎提问</del></p>
<h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><p>微信小程序开发是比较方便的，但是因为它并不是直接运行在系统底层上的程序，所以会受到子程序微信的一定限制，程序的功能实现就没有那么方便。</p>
<p>完结撒花~~~</p>
<p>欢迎各位大佬在评论区提出观点~~~</p>

        </div>

        

        
            <div class="article-nav">
                
                    <div class="article-prev">
                        <a class="prev"
                           rel="prev"
                           href="/2021/03/21/%E4%B8%AA%E4%BA%BA%E7%8E%AF%E5%A2%83%E7%AE%80%E4%BB%8B-NO-2-Zsh/"
                        >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                            <span class="title flex-center">
                                <span class="post-nav-title-item">个人环境简介 NO.2 - Zsh</span>
                                <span class="post-nav-item">上一篇</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next">
                        <a class="next"
                           rel="next"
                           href="/2021/03/05/%E4%B8%AA%E4%BA%BA%E7%8E%AF%E5%A2%83%E7%AE%80%E4%BB%8B-NO-1-Wsl-2/"
                        >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">个人环境简介 NO.1 - Wsl 2</span>
                                <span class="post-nav-item">下一篇</span>
                            </span>
                            <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        

        
            <div class="comment-container">
                <div class="comments-container">
    <div id="comment-anchor"></div>
    <div class="comment-area-title">
        <i class="fas fa-comments">&nbsp;评论</i>
    </div>
    

        
            
    <div class="valine-container">
        <script data-pjax
                src="//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js"></script>
        <div id="vcomments"></div>
        <script data-pjax>
            function loadValine() {
                new Valine({
                    el: '#vcomments',
                    appId: 'hGzCvE6RESemcTo8gfkul9hV-gzGzoHsz',
                    appKey: 'SSqOtE9IVhhPOk8oXCi6KjEV',
                    meta: ['nick', 'mail', 'link'],
                    avatar: 'wavatar',
                    enableQQ: true,
                    placeholder: '😜 尽情吐槽吧~',
                    lang: 'zh-CN'.toLowerCase()
                });

                function getAuthor(language) {
                    switch (language) {
                        case 'en':
                            return 'Author';
                        case 'zh-CN':
                            return '博主';
                        default:
                            return 'Master';
                    }
                }

                // Add "Author" identify
                const getValineDomTimer = setInterval(() => {
                    const vcards = document.querySelectorAll('#vcomments .vcards .vcard');
                    if (vcards.length > 0) {
                        let author = 'YCR';

                        if (author) {
                            for (let vcard of vcards) {
                                const vnick_dom = vcard.querySelector('.vhead .vnick');
                                const vnick = vnick_dom.innerHTML;
                                if (vnick === author) {
                                    vnick_dom.innerHTML = `${vnick} <span class="author">${getAuthor(KEEP.hexo_config.language)}</span>`
                                }
                            }
                        }
                        clearInterval(getValineDomTimer);
                    } else {
                        clearInterval(getValineDomTimer);
                    }
                }, 2000);
            }

            if ('true') {
                const loadValineTimeout = setTimeout(() => {
                    loadValine();
                    clearTimeout(loadValineTimeout);
                }, 1000);
            } else {
                window.addEventListener('DOMContentLoaded', loadValine);
            }
        </script>
    </div>



        
    
</div>

            </div>
        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2020</span>&nbsp;-&nbsp;
            
            2021&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">YCR</a>
        </div>
        
            <script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <div class="website-count info-item">
                
                    <span id="busuanzi_container_site_uv">
                        访问人数&nbsp;<span id="busuanzi_value_site_uv"></span>&ensp;
                    </span>
                
                
                    <span id="busuanzi_container_site_pv">
                        总访问量&nbsp;<span id="busuanzi_value_site_pv"></span>
                    </span>
                
            </div>
        
        <div class="theme-info info-item">
            由 <a target="_blank" href="https://hexo.io">Hexo</a> 驱动&nbsp;|&nbsp;主题&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.2</a>
        </div>
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        
            <li class="tools-item page-aside-toggle">
                <i class="fas fa-outdent"></i>
            </li>
        

        <!-- go comment -->
        
            <li class="go-comment">
                <i class="fas fa-comment"></i>
            </li>
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    
        <aside class="page-aside">
            <div class="post-toc-wrap">
    <div class="post-toc">
        <ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%8F%91%E7%AC%94%E8%AE%B0"><span class="nav-number">1.</span> <span class="nav-text">微信小程序开发笔记</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%87%86%E5%A4%87%E5%B7%A5%E4%BD%9C"><span class="nav-number">1.1.</span> <span class="nav-text">准备工作</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Visual-Studio-Code-%E6%8F%92%E4%BB%B6%E5%87%86%E5%A4%87"><span class="nav-number">1.2.</span> <span class="nav-text">Visual Studio Code 插件准备</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8Mqtt%E5%8D%8F%E8%AE%AE%E8%BF%9E%E6%8E%A5%E9%98%BF%E9%87%8C%E4%BA%91%E7%89%A9%E8%81%94%E7%BD%91%E5%B9%B3%E5%8F%B0"><span class="nav-number">1.3.</span> <span class="nav-text">使用Mqtt协议连接阿里云物联网平台</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AE%B2%E5%87%A0%E4%B8%AAmqtt%E5%B8%B8%E7%94%A8%E7%9A%84%E5%87%BD%E6%95%B0"><span class="nav-number">1.4.</span> <span class="nav-text">讲几个mqtt常用的函数</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#mqtt-connect"><span class="nav-number">1.4.1.</span> <span class="nav-text">mqtt.connect()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#client-subscribe"><span class="nav-number">1.4.2.</span> <span class="nav-text">client.subscribe()</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#client-publish"><span class="nav-number">1.4.3.</span> <span class="nav-text">client.publish()</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-number">1.5.</span> <span class="nav-text">总结</span></a></li></ol></li></ol>
    </div>
</div>
        </aside>
    

    <div class="image-viewer-container">
    <img src="">
</div>


    
        <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
          <span class="search-input-field-pre">
            <i class="fas fa-keyboard"></i>
          </span>
            <div class="search-input-container">
                <input autocomplete="off"
                       autocorrect="off"
                       autocapitalize="off"
                       placeholder="搜索..."
                       spellcheck="false"
                       type="search"
                       class="search-input"
                >
            </div>
            <span class="popup-btn-close">
                <i class="fas fa-times"></i>
            </span>
        </div>
        <div id="search-result">
            <div id="no-result">
                <i class="fas fa-spinner fa-pulse fa-5x fa-fw"></i>
            </div>
        </div>
    </div>
</div>

    

</main>



<script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.2/source/js/utils.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.2/source/js/main.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.2/source/js/header-shrink.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.2/source/js/back2top.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.2/source/js/dark-light-toggle.js"></script>


    <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.2/source/js/local-search.js"></script>



    <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.2/source/js/code-copy.js"></script>




<div class="post-scripts pjax">
    
        <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.2/source/js/left-side-toggle.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.2/source/js/libs/anime.min.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.2/source/js/toc.js"></script>
    
</div>


    <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.2/source/js/libs/pjax.min.js"></script>
<script>
    window.addEventListener('DOMContentLoaded', () => {
        const pjax = new Pjax({
            selectors: [
                'head title',
                '.page-container',
                '.pjax'
            ],
            history: true,
            debug: false,
            cacheBust: false,
            timeout: 0,
            analytics: false,
            currentUrlFullReload: false,
            scrollRestoration: false,
            // scrollTo: true,
        });

        document.addEventListener('pjax:send', () => {
            KEEP.utils.pjaxProgressBarStart();
        });

        document.addEventListener('pjax:complete', () => {
            KEEP.utils.pjaxProgressBarEnd();
            pjax.executeScripts(document.querySelectorAll('script[data-pjax], .pjax script'));
            KEEP.refresh();
        });
    });
</script>



</body>
</html>
